﻿<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    xmlns:ee="http://schemas.microsoft.com/expression/2010/effects"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:input="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"
    xmlns:rxValueConverters="clr-namespace:Songhay.ValueConverters;assembly=Songhay.Silverlight"
    Tag="Blend Interactions - GoToStateAction and VisualStateManager">
    <UserControl.Resources>
        <rxValueConverters:InverseBooleanConverter x:Key="InverseBooleanConverter" />

        <Style TargetType="ToggleButton">
            <Setter Property="FontSize" Value="18" />
            <Setter Property="Margin" Value="5" />
            <Setter Property="Width" Value="160" />
        </Style>
    </UserControl.Resources>
    <StackPanel x:Name="MyStack"
        HorizontalAlignment="Center">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="BloatedCurvyState">
                    <Storyboard>
                        <ColorAnimation
                            Duration="0" To="#FFD67A1D"
                            Storyboard.TargetName="MyRectangle"
                            Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                            d:IsOptimized="True"
                            />
                        <DoubleAnimation
                            Duration="0" To="256"
                            Storyboard.TargetName="MyRectangle"
                            Storyboard.TargetProperty="(FrameworkElement.Width)"
                            d:IsOptimized="True"
                            />
                        <DoubleAnimation
                            Duration="0" To="256"
                            Storyboard.TargetName="MyRectangle"
                            Storyboard.TargetProperty="(FrameworkElement.Height)"
                            d:IsOptimized="True"
                            />
                        <DoubleAnimation
                            Duration="0" To="30"
                            Storyboard.TargetName="MyRectangle"
                            Storyboard.TargetProperty="(Rectangle.RadiusX)"
                            d:IsOptimized="True"
                            />
                        <DoubleAnimation
                            Duration="0" To="30"
                            Storyboard.TargetName="MyRectangle"
                            Storyboard.TargetProperty="(Rectangle.RadiusY)"
                            d:IsOptimized="True"
                            />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="EmaciatedDiamondState">
                    <Storyboard>
                        <ColorAnimation
                            Duration="0" To="#FF2FC82A"
                            Storyboard.TargetName="MyRectangle"
                            Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                            d:IsOptimized="True"
                            />
                        <DoubleAnimation
                            Duration="0" To="45"
                            Storyboard.TargetName="MyRectangle"
                            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"
                            d:IsOptimized="True"
                            />
                        <DoubleAnimation
                            Duration="0" To="0.75"
                            Storyboard.TargetName="MyRectangle"
                            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)"
                            d:IsOptimized="True"
                            />
                        <DoubleAnimation
                            Duration="0" To="0.75"
                            Storyboard.TargetName="MyRectangle"
                            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"
                            d:IsOptimized="True"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="DefaultState" />
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.5" />
                    <VisualTransition GeneratedDuration="0:0:0.5"
                        To="BloatedCurvyState">
                        <VisualTransition.GeneratedEasingFunction>
                            <ElasticEase EasingMode="EaseInOut"/>
                        </VisualTransition.GeneratedEasingFunction>
                    </VisualTransition>
                    <VisualTransition GeneratedDuration="0:0:1.5"
                        To="EmaciatedDiamondState">
                        <VisualTransition.GeneratedEasingFunction>
                            <ExponentialEase EasingMode="EaseInOut"/>
                        </VisualTransition.GeneratedEasingFunction>
                    </VisualTransition>
                    <VisualTransition GeneratedDuration="0:0:0.5"
                        From="EmaciatedDiamondState">
                        <VisualTransition.GeneratedEasingFunction>
                            <BackEase EasingMode="EaseInOut"/>
                        </VisualTransition.GeneratedEasingFunction>
                    </VisualTransition>
                    <VisualTransition GeneratedDuration="0:0:0.5"
                        From="BloatedCurvyState">
                        <VisualTransition.GeneratedEasingFunction>
                            <BackEase EasingMode="EaseOut"/>
                        </VisualTransition.GeneratedEasingFunction>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <VisualStateManager.CustomVisualStateManager>
            <ei:ExtendedVisualStateManager/>
        </VisualStateManager.CustomVisualStateManager>
        <Rectangle x:Name="MyRectangle"
            Fill="#FFF4F4F5"
            RenderTransformOrigin="0.5,0.5"
            Stroke="Black"
            Width="160" Height="160">
            <Rectangle.RenderTransform>
                <CompositeTransform />
            </Rectangle.RenderTransform>
        </Rectangle>
        <StackPanel
            HorizontalAlignment="Center"
            Margin="8"
            Orientation="Horizontal">
            <input:Label Content="Visual State:" />
            <ComboBox x:Name="MyCombo"
                IsEnabled="{Binding IsChecked, ElementName=MyToggle, Converter={StaticResource InverseBooleanConverter}}"
                Width="100">
                <ComboBoxItem
                    Content="Bloated"
                    IsSelected="True"
                    Tag="BloatedCurvyState"
                    />
                <ComboBoxItem
                    Content="Emaciated"
                    Tag="EmaciatedDiamondState"
                    />
            </ComboBox>
        </StackPanel>
        <ToggleButton x:Name="MyToggle"
            Content="{Binding ElementName=MyCombo, Path=SelectedValue.Content}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Checked">
                    <ei:GoToStateAction x:Name="GoToBloated"
                        StateName="{Binding ElementName=MyCombo, Path=SelectedValue.Tag}"
                        TargetObject="{Binding ElementName=MyStack}"
                        />
                </i:EventTrigger>
                <i:EventTrigger EventName="Unchecked">
                    <ei:GoToStateAction x:Name="GoToDefaultForBloated"
                        StateName="DefaultState"
                        TargetObject="{Binding ElementName=MyStack}"
                        />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </ToggleButton>
    </StackPanel>
</UserControl>
